<template>
  <div :class="loading ? 'b-skeleton' : ''" :style="skeletonStyle">
    <slot v-if="!loading"></slot>
  </div>
</template>

<script lang="ts">
  import {
    ref,
    onMounted,
    computed
  } from 'vue'
  export default {
    name: 'b-skeleton',
    props: {
      loading: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '70px'
      },
      height: {
        type: String,
        default: '50px'
      },
      borderRadius: {
        type: String,
        default: '0px'
      },
      otherStyle: {
        type: Object,
        default: ()=>{
          return {}
        }
      }
    },
    setup(props: any) {
      // skeleton's loading style
      const skeletonStyle = computed(() => {
        return props.loading ? {
          width: props.width,
          height: props.height,
          borderRadius: props.borderRadius,
          ...props.otherStyle
        } : {}
      })
      // @returns
      return {
        skeletonStyle
      }
    }
  }
</script>

<style scoped>
  .b-skeleton {
    background: linear-gradient(90deg, rgb(242, 242, 242) 25%, rgb(230, 230, 230) 37%, rgb(242, 242, 242) 63%) 0% 0% / 400% 100%;
    animation: 1.4s ease 0s infinite normal none running ant-skeleton-loading;
  }
</style>